<template>
  <BaseEcharts :options="option" :styleConfig="{width:'300px',height:'300px'}" />
</template>

<script lang="ts" setup>

let option = ref({
   grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0
   },
   title: {
      text: '',
      x: 'center'
   },
   tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
   },
   legend: {
      show: false,
      // orient: 'vertical',
      // left: 'left',
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
   },
   series: [
      {
         name: '城市管理（社会治理网格）',
         type: 'pie',
         radius: '65%',
         center: ['50%', '50%'],
         label: {
            show: true,

            formatter: '{b} {d}%'
         },
         data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
         ]
      }
   ]
})
setTimeout(()=>{
option.value ={
   grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0
   },
   title: {
      text: '',
      x: 'center'
   },
   tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
   },
   legend: {
      show: false,
      // orient: 'vertical',
      // left: 'left',
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
   },
   series: [
      {
         name: '城市管理（社会治理网格）',
         type: 'pie',
         radius: '65%',
         center: ['50%', '50%'],
         label: {
            show: true,

            formatter: '{b} {d}%'
         },
         data: [
            { value: 360, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 450, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 15, name: '搜索引擎' },
            { value: 25, name: '搜索引擎2' }
         ]
      }
   ]
}
},5000)
</script>
